<kbn-management-app section="kibana">
  <kbn-management-indices>
    <div ng-controller="managementIndicesCreate" class="kbn-management-indices-create">
      <div class="page-header">
        <h1>Configure an index pattern</h1>
        In order to use Kibana you must configure at least one index pattern. Index patterns are
        used to identify the Elasticsearch index to run search and analytics against. They are also
        used to configure fields.
      </div>
      <div>
        <form name="form" role="form" class="well" ng-submit="createIndexPattern()">
          <div class="form-group time-and-pattern">
            <label>
              <input
                ng-model="index.isTimeBased"
                type="checkbox">
              Index contains time-based events
            </label>
            <br>
            <label ng-if="index.isTimeBased">
              <input ng-model="index.nameIsPattern" type="checkbox">
              Use event times to create index names <small>[DEPRECATED]</small>
            </label>
          </div>

          <div class="form-group" ng-if="index.isTimeBased && index.nameIsPattern">
            <div class="alert alert-warning">
              <h4>Time-interval based index patterns are deprecated!</h4>
              <p>
                We <strong>strongly recommend</strong> using wildcard pattern names instead of
                time-interval based index patterns.
              </p>
              <p>
                Kibana is now smart enough to automatically determine which
                indices to search against within the current time range for
                wildcard index patterns. This means that wildcard
                index patterns now get the same performance optimizations when
                searching within a time range as time-interval patterns.
              </p>
            </div>
            <label>
              Index pattern interval&nbsp;
              <kbn-info info="The interval at which index names rotate."></kbn-info>
            </label>
            <select
              required
              ng-options="opt.display for opt in index.nameIntervalOptions"
              ng-model="index.nameInterval"
              class="form-control">
            </select>
          </div>

          <div class="form-group">
            <label>
              Index name or pattern
            </label>
            <p class="help-block" ng-if="!index.nameIsPattern">Patterns allow you to define dynamic index names using * as a wildcard. Example: logstash-*</p>
            <p class="help-block" ng-if="index.isTimeBased && index.nameIsPattern">Patterns allow you to define dynamic index names. Static text in an index name is denoted using brackets. Example: [logstash-]YYYY.MM.DD. Please note that weeks are setup to use ISO weeks which start on Monday. &mdash;
              <small><a target="_blank" href="http://momentjs.com/docs/#/displaying/format/">Date Format Documentation</a></small></p>
            <input
              ng-model="index.name"
              ng-attr-placeholder="{{index.defaultName}}"
              ng-model-options="{ updateOn: 'default blur', debounce: {'default': 2500, 'blur': 0} }"
              validate-index-name
              allow-wildcard
              name="name"
              required
              type="text"
              class="form-control">
              <small ng-show="index.nameInterval.name == 'weeks'">
                <strong>Note: </strong>
                I noticed you're using weekly indices. Kibana requires ISO weeks be used in your index creation.
                See <a href="https://en.wikipedia.org/wiki/ISO_week_date" target="_blank" title="Wikipedia: ISO Week Date">Wikipedia: ISO Week Date</a>
              </small>
            </div>

          <div class="form-group" ng-if="canExpandIndices()">
            <label>
              <input ng-model="index.notExpandable" type="checkbox">
              Do not expand index pattern when searching <small>(Not recommended)</small>
            </label>

            <div ng-if="index.notExpandable" class="alert alert-info">
              This index pattern will be queried directly rather than being
              expanded into more performant searches against individual indices.

              Elasticsearch will receive a query against <em>{{index.name}}</em>
              and will have to search through all matching indices regardless
              of whether they have data that matches the current time range.
            </div>

            <p class="help-block">
              By default, searches against any time-based index pattern that
              contains a wildcard will automatically be expanded to query only
              the indices that contain data within the currently selected time
              range.
            </p>

            <p class="help-block">
              Searching against the index pattern <em>logstash-*</em> will
              actually query elasticsearch for the specific matching indices
              (e.g. <em>logstash-2015.12.21</em>) that fall within the current
              time range.
            </p>
          </div>

          <section>
            <div class="alert alert-danger" ng-repeat="err in index.patternErrors">
              {{err}}
            </div>

            <div class="alert alert-info" ng-if="index.samples">
              Attempted to match the following indices and aliases:
              <ul>
                <li ng-repeat="sample in index.samples">{{sample}}</li>
              </ul>
              <button type="button" ng-click="moreSamples(true)" class="btn btn-default">
                Expand Search
              </button>
            </div>

            <div class="alert alert-{{index.existing.class}}" ng-if="index.existing">
              Pattern matches {{index.existing.matchPercent}} of existing indices and aliases
              <ul>
                <li ng-repeat="match in index.existing.matches | orderBy:'toString()'| limitTo: index.sampleCount">{{match}}</li>
              </ul>
              <button
                ng-if="index.sampleCount < index.existing.matches.length"
                ng-click="moreSamples()"
                type="button"
                class="btn btn-default">
                Expand Search
              </button>
            </div>

            <div class="alert alert-info" ng-if="index.existing.failures.length">
              Indices and aliases that were found, but did not match the pattern:
              <ul>
                <li ng-repeat="match in index.existing.failures | limitTo: index.sampleCount">{{match}}</li>
              </ul>
              <a
                ng-if="index.sampleCount < index.existing.matches.length"
                ng-click="moreSamples()"
                class="alert-link">
                more
              </a>
            </div>
          </section>

          <div class="form-group" ng-if="index.isTimeBased && !index.fetchFieldsError">
            <label>
              Time-field name
              &nbsp;
              <kbn-info info="This field will be used to filter events with the global time filter"></kbn-info>
              &nbsp;
              <small>
                <a ng-click="refreshFieldList();"> refresh fields</a>
              </small>
            </label>
            <select
              required
              ng-if="!index.fetchFieldsError"
              ng-options="field.name for field in index.dateFields"
              ng-model="index.timeField"
              auto-select-if-only-one="index.dateFields"
              class="form-control">
            </select>
          </div>

          <button
            data-test-subj="submitCreateIndexPatternFromExistingForm"
            ng-disabled="form.$invalid || index.fetchFieldsError"
            ng-class="index.fetchFieldsError ? 'btn-default' : 'btn-success'"
            type="submit"
            class="btn">
            <span ng-hide="form.name.$error.indexNameInput">{{index.fetchFieldsError || "Create" }}</span>
            <span ng-show="form.name.$error.indexNameInput">Invalid index name pattern.</span>
          </button>
        </form>
      </div>
    </div>
  </kbn-management-indices>
</kbn-management-app>
